<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box1 {
      position: absolute;
      left: 0;

      width: 200px;
      height: 200px;
      background-color: #ff4933;
    }

    .box2 {
      position: absolute;
      left: 0;
      top: 300px;

      width: 300px;
      height: 300px;
      background-color: #5f25cc;
    }
  </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<script>
  var box1 = document.querySelector('.box1');
  var box2 = document.querySelector('.box2');
  
  function animate(obj, target) {
    obj.timer = setInterval(function () {
      if (obj.offsetLeft > target) {
        clearInterval(obj.timer);
      }
      obj.style.left = obj.offsetLeft + 1 + 'px';
    }, 30)
  }

  animate(box1, 200);
  animate(box2, 300);
</script>
</body>
</html>